<template>
   <el-table-column
    :prop="col.prop"
    :label="col.label"
    v-show="!col.hidden"
    :column-key="renderKey(col)"
    :rowSpan="col.rowSpan || 1"
    :class-name="col.hidden ? 'hiddenClass' : ''"
    :fixed="!!col.fixed"
    align="center">
    <template slot-scope="scope">
      <img :class="{'edit': renderEdit(scope.row[col.prop])}" style="width: 24px;height:24px" v-if="!isNaN(parseFloat(renderData(scope.row[col.prop]))) && renderData(scope.row[col.prop]) >= 1 && !scope.row[col.prop].sum" src="../../asset/images/1.png" alt="">
      <img :class="{'edit': renderEdit(scope.row[col.prop])}" style="width: 24px;height:24px" v-else-if="!isNaN(parseFloat(renderData(scope.row[col.prop]))) && renderData(scope.row[col.prop]) == 0 && !scope.row[col.prop].sum" src="../../asset/images/2.png" alt="">
      <img :class="{'edit': renderEdit(scope.row[col.prop])}" style="width: 24px;height:24px" v-else-if="renderData(scope.row[col.prop]) == '-'" src="../../asset/images/3.png" alt="">
      <span v-else :class="{'edit': renderEdit(scope.row[col.prop])}">{{renderData(scope.row[col.prop])}}</span>
    </template>
    <template v-if="col.children && col.children.length">
      <tableCol v-for="(item, index) in col.children"
        :key="index"
        :col="item"></tableCol>
    </template>
  </el-table-column>
</template>
<script>
export default {
 name: 'tableCol',
 props: {
  col: {
    type: Object,
    default: () => {}
  }
 },
 mounted() {
 },
 methods: {
  renderKey(col) {
    return `${col.rowSpan || '0'}-${col.colSpan || '0'}-${col.hiddenRow ? '0' : '1'}`
  },
  renderData(data) {
    let text = ''
    if (typeof data == 'string') {
      text = data
    } else if (data instanceof Object) {
      text = data.value
    }
    return text
  },
  renderEdit(data) {
    let flag = false
    if (data instanceof Object) {
      flag = !!data.edit
    }
    return flag
  },
  renderStyle(data) {
    if (typeof data == 'string') {
      return {}
    } else {
      if (!!data && data.hasOwnProperty('color')) {
        return {background: data.color}
      } else {
        return {}
      }
    }
  },
//   renderHeader(h, { column, $index }) {
//      this.$nextTick(() => {
//         let keylist = column.columnKey.split('-')

//         if (keylist[0] != 0) {
//           Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
//             dom.setAttribute('rowSpan',Number(keylist[0]));
//           });
//         }
//         if (keylist[1] != 0) {
//           Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
//             dom.setAttribute('colSpan',Number(keylist[1]))
//           });
//         }
//         if (keylist[2] === '0') {
//           Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
//             dom.style.display = 'none'
//             dom.setAttribute('rowSpan', 0);
//           });
//         }

         
//       })

//     return h('span', column.label)
//   }
 }
}
</script>
<style lang="less" scoped>
.edit {
  cursor: pointer;
}
</style>
